<template>
  <div class="layout_main">
    <div ref="head_fixed_ref" :class="scollflag ? 'head_fixed head_base' : 'head_fixed_scroll head_base'">
      <div class="head_logo">
        <img src="~@/assets/image/head_logo.png" class="logo" alt="logo" />
      </div>
      <div class="head_router">
        <div
          v-for="(item, index) in menus"
          :key="item.path"
          :class="index === clickflag ? 'router_click router_base' : 'router_base'"
          :span="4"
          @click="goto(item.path, index)"
        >
          <span>{{ item.meta.title }}</span>
          <i v-if="item.childRouter && item.childRouter.length > 0" class="custom_icon"></i>
          <div class="hover_header">
            <div
              v-for="initem in item.childRouter"
              :key="initem.path"
              class="hover_each"
              @click.stop="gotoChild(initem.path)"
            >
              {{ initem.title }}
            </div>
          </div>
        </div>
      </div>
      <div class="head_user">
        <right-info
          :currentUser="currentUser"
          :menu="showMenu"
          :marginRightConsole="marginRightConsole"
          :fontSize="fontSize"
        ></right-info>
      </div>
    </div>
    <div class="content_main"><router-view /></div>
    <global-footer />
  </div>
</template>

<script>
import { constantRouterMap } from '@/config/router.config'
import RightInfo from '@/components/FixedUser/RightInfo'
import GlobalFooter from '@/components/FixedUser/GlobalFooter'
import { mapState } from 'vuex'
export default {
  name: 'FixedLayout',
  components: {
    RightInfo,
    GlobalFooter
  },
  data() {
    return {
      // base
      menus: [],
      scollflag: true,
      clickflag: 0,
      showMenu: true,
      fontSize: '14',
      marginRightConsole: '40' // 子组件控制台的右边距
    }
  },
  computed: {
    ...mapState({
      // 动态主路由
      currentUser: state => state.user.info
    })
  },
  created() {
    const routes = constantRouterMap.find(item => item.path === '/')
    this.menus = (routes && routes.children) || []
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    // 改变表头的样式
    handleScroll() {
      // console.log(el)
      this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
      if (this.scrollTop > 0) {
        this.scollflag = false
      } else {
        this.scollflag = true
      }
    },
    // 表头的路由跳转
    goto(path, index) {
      this.clickflag = index
      this.$router.push(path)
    },
    // 二级路由的跳转
    gotoChild(path) {
      this.$router.push(path)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../components/index.less';
.layout_main {
  min-width: 1280px;
  min-height: 100vh;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: auto;
  -moz-flex: auto;
  flex: auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  background: #f0f2f5;
}
.content_main {
  flex: auto;
  -ms-flex: auto;
  -moz-flex: auto;
  min-height: calc(100vh - 98px);
}
.head_fixed {
  position: fixed;
  top: 0;
  left: 0;
  color: #fff;
  background: hsla(0, 0%, 100%, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -ms-backdrop-filter: blur(8px);
  -moz-backdrop-filter: blur(8px);
  transition: background 0.3s;
  border-bottom: 1px solid rgba(61, 61, 61, 0.15);
  ul {
    background: hsla(0, 0%, 100%, 0.1);
    height: 100%;
    margin: 0;
  }
}
.head_fixed_scroll {
  position: fixed;
  top: 0;
  left: 0;
  transition: background 0.2s;
  background: @bg-color;
  color: #ffffff;
  backdrop-filter: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  ul {
    background: @bg-color;
    color: #ffffff;
    height: 100%;
    margin: 0;
  }
}
.head_base {
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}
// 首页有滚动条，每个部分不要用百分比，设置最小宽度
.head_logo {
  min-width: 140px;
  margin-left: 22px;
  .logo {
    width: 124px;
    height: 30px;
  }
}
.head_router {
  position: relative;
  min-width: 420px;
  width: 62%;
  height: 100%;
  margin-left: 42px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .hover_header {
    display: none;
    background-color: #273865;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 12px;
    letter-spacing: 0px;
    color: #ffffff;
    padding: 4px 0px;
    position: absolute;
    transform: translate(0, -10px);
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
    z-index: 999; /* 避免被其他遮蔽 */
    .hover_each {
      text-align: center;
      height: 22px;
      line-height: 22px;
      padding: 0 9px;
    }
    .hover_each:hover {
      cursor: default;
      background: @font-hover;
    }
  }
  .router_base {
    position: relative;
    cursor: default;
    height: 100%;
    line-height: 60px;
    margin: 0 24px;
    font-size: 14px;
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
    .custom_icon {
      position: relative;
      font-size: 14px;
      margin-left: 1px;
      display: inline-block;
    }
    // 下拉的箭头
    .custom_icon::before {
      content: '';
      width: 8px;
      height: 8px;
      border: solid @font-hover;
      border-width: 1px 0 0 1px;
      transform: translate(-50%, -50%) rotate(-135deg);
      transition: all 0.8s ease 0s;
      position: absolute;
      left: 8px;
      top: -4px;
    }
  }
  // 悬浮箭头向上
  .router_base:hover {
    .custom_icon::before {
      content: '';
      width: 8px;
      height: 8px;
      border: solid @font-hover;
      border-width: 1px 0 0 1px;
      transform: translate(-50%, -50%) rotate(45deg);
      position: absolute;
      left: 8px;
      top: -4px;
    }
    .hover_header {
      display: block;
    }
  }
  .router_click {
    border-bottom: 1px solid #b8e44d;
  }
}
.head_user {
  height: 100%;
  min-width: 200px;
  margin-right: 120px;
}
// 二级路由的背景色
.ant-menu-submenu > .ant-menu {
  background-color: #273865;
  border-radius: 2px;
}
</style>
